<template>
  <el-container v-loading="loading">

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" label-position="left"
             class="demo-ruleForm" size="small">

      <!--currentOption-->
      <el-form-item label="佣金计算方式">
        <el-radio v-model="currentOption" label="1" border>跑腿</el-radio>
        <el-radio v-model="currentOption" label="2" border>代驾</el-radio>
        <el-radio v-model="currentOption" label="3" border>排队</el-radio>
        <el-radio v-model="currentOption" label="4" border>家政</el-radio>
      </el-form-item>

      <div v-if="currentOption == 1">
        <el-row>
          <h4>距离计费</h4>
          <hr>
        </el-row>

        <el-form-item label="起步距离">
          <el-input v-model="ruleForm.deliver.dis.base_dis">
            <template slot="append">km</template>
          </el-input>
        </el-form-item>

        <el-form-item label="运费">
          <el-input v-model="ruleForm.deliver.dis.base_price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="增加距离">
          <el-input v-model="ruleForm.deliver.dis.add_dis">
            <template slot="append">km</template>
          </el-input>
        </el-form-item>

        <el-form-item label="续费">
          <el-input v-model="ruleForm.deliver.dis.add_price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="距离类型">
          <el-radio v-model="ruleForm.deliver.type" label="1" border>骑行</el-radio>
          <el-radio v-model="ruleForm.deliver.type" label="2" border>驾车</el-radio>
          <el-radio v-model="ruleForm.deliver.type" label="3" border>步行</el-radio>
          <el-radio v-model="ruleForm.deliver.type" label="4" border>直线</el-radio>
        </el-form-item>

        <el-row>
          <h4>重量计费</h4>
          <hr>
        </el-row>

        <el-form-item label="起步重量">
          <el-input v-model="ruleForm.deliver.weight.base_weight">
            <template slot="append">kg</template>
          </el-input>
        </el-form-item>

        <el-form-item label="运费">
          <el-input v-model="ruleForm.deliver.weight.base_price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="增加重量">
          <el-input v-model="ruleForm.deliver.weight.add_weight">
            <template slot="append">kg</template>
          </el-input>
        </el-form-item>

        <el-form-item label="续费">
          <el-input v-model="ruleForm.deliver.weight.add_price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-row>
          <h4>时间计费</h4>
          <hr>
        </el-row>

        <el-form-item label="配送时间段">
          <el-col span="20">
            <el-input v-model="ruleForm.deliver.during">
              <template slot="prepend">间隔</template>
              <template slot="append">分钟</template>
            </el-input>
          </el-col>
          <el-col span="4">
            <el-button type="primary" @click="runnerCreateTime">生成配送时间段</el-button>
          </el-col>
        </el-form-item>

        <el-form-item label="时间运费模板" v-if="ruleForm.deliver.during_time.length > 0">
          <el-col span="12" class="row-col" v-for="timedItem in ruleForm.deliver.during_time">
            <el-col span="12">
              <el-input v-model="timedItem.timed" readonly="true">
                <template slot="append">附加费</template>
              </el-input>
            </el-col>
            <el-col span="7">
              <el-input v-model="timedItem.price">
                <template slot="append">元</template>
              </el-input>
            </el-col>
            <el-col span="4">
              <el-button type="success" v-if="timedItem.enable == 1" @click="changeEnable({currentIten:timedItem})">使用中
              </el-button>
              <el-button type="info" v-if="timedItem.enable == 0" @click="changeEnable({currentIten:timedItem})">已废弃
              </el-button>
            </el-col>
          </el-col>
        </el-form-item>

      </div>

      <div v-if="currentOption == 2">
        <el-form-item label="起步距离">
          <el-input v-model="ruleForm.drive.base_dis">
            <template slot="append">km</template>
          </el-input>
        </el-form-item>

        <el-form-item label="运费">
          <el-input v-model="ruleForm.drive.base_price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="增加距离">
          <el-input v-model="ruleForm.drive.add_dis">
            <template slot="append">km</template>
          </el-input>
        </el-form-item>

        <el-form-item label="续费">
          <el-input v-model="ruleForm.drive.add_price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="距离类型">
          <el-radio v-model="ruleForm.drive.type" label="1" border>骑行</el-radio>
          <el-radio v-model="ruleForm.drive.type" label="2" border>驾车</el-radio>
          <el-radio v-model="ruleForm.drive.type" label="3" border>步行</el-radio>
          <el-radio v-model="ruleForm.drive.type" label="4" border>直线</el-radio>
        </el-form-item>
      </div>

      <div v-if="currentOption == 3">
        <el-form-item label="起步时间" prop="base_time">
          <el-input v-model="ruleForm.line.base_time">
            <template slot="append">分钟</template>
          </el-input>
        </el-form-item>

        <el-form-item label="起步金额" prop="base_price">
          <el-input v-model="ruleForm.line.base_price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="增加时间" prop="add_time">
          <el-input v-model="ruleForm.line.add_time">
            <template slot="append">分钟</template>
          </el-input>
        </el-form-item>

        <el-form-item label="增加金额" prop="add_price">
          <el-input v-model="ruleForm.line.add_price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="配送时间段">
          <el-col span="20">
            <el-input v-model="ruleForm.line.during">
              <template slot="prepend">间隔</template>
              <template slot="append">分钟</template>
            </el-input>
          </el-col>
          <el-col span="4">
            <el-button type="primary" @click="lineCreateTime">生成配送时间段</el-button>
          </el-col>
        </el-form-item>

        <el-form-item label="时间运费模板" v-if="ruleForm.line.during_time.length > 0">
          <el-col span="12" class="row-col" v-for="timedItem in ruleForm.line.during_time">
            <el-col span="12">
              <el-input v-model="timedItem.timed" readonly="true">
                <template slot="append">附加费</template>
              </el-input>
            </el-col>
            <el-col span="7">
              <el-input v-model="timedItem.price">
                <template slot="append">元</template>
              </el-input>
            </el-col>
            <el-col span="4">
              <el-button type="success" v-if="timedItem.enable == 1" @click="changeEnable({currentIten:timedItem})">使用中
              </el-button>
              <el-button type="info" v-if="timedItem.enable == 0" @click="changeEnable({currentIten:timedItem})">已废弃
              </el-button>
            </el-col>
          </el-col>
        </el-form-item>

      </div>

      <div v-if="currentOption == 4">

        <el-form-item label="星期一">
          <el-input v-model="ruleForm.homework.week.mon">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="星期二">
          <el-input v-model="ruleForm.homework.week.tue">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="星期三">
          <el-input v-model="ruleForm.homework.week.wed">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="星期四">
          <el-input v-model="ruleForm.homework.week.thu">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="星期五">
          <el-input v-model="ruleForm.homework.week.fri">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="星期六">
          <el-input v-model="ruleForm.homework.week.sat">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="星期天">
          <el-input v-model="ruleForm.homework.week.sun">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="配送时间段">
          <el-col span="20">
            <el-input v-model="ruleForm.homework.during">
              <template slot="prepend">间隔</template>
              <template slot="append">分钟</template>
            </el-input>
          </el-col>
          <el-col span="4">
            <el-button type="primary" @click="homemakingCreateTime">生成配送时间段</el-button>
          </el-col>
        </el-form-item>

        <el-form-item label="时间运费模板" v-if="ruleForm.homework.during_time.length > 0">
          <el-col span="12" class="row-col" v-for="timedItem in ruleForm.homework.during_time">
            <el-col span="12">
              <el-input v-model="timedItem.timed" readonly="true">
                <template slot="append">附加费</template>
              </el-input>
            </el-col>
            <el-col span="7">
              <el-input v-model="timedItem.price">
                <template slot="append">元</template>
              </el-input>
            </el-col>
            <el-col span="4">
              <el-button type="success" v-if="timedItem.enable == 1" @click="changeEnable({currentIten:timedItem})">使用中
              </el-button>
              <el-button type="info" v-if="timedItem.enable == 0" @click="changeEnable({currentIten:timedItem})">已废弃
              </el-button>
            </el-col>
          </el-col>
        </el-form-item>

      </div>


      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即保存</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
  export default {
    mounted() {
      let _this = this;
      this.api.getPlatformPriceModelConfig().then(function (res) {
        if (res.code == 1) {
          res.data.deliver.type = res.data.deliver.type.toString();
          res.data.drive.type = res.data.drive.type.toString();
          _this.ruleForm = res.data;
        }
        _this.loading = false;
      }).catch(function (error) {
        throw new Error(error);
      });
    },
    methods: {
      goBack: function () {
        this.$router.go(-1)
      },
      submitForm(formName) {
        let _this = this;
        console.log(1);
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // _this.ruleForm.content = JSON.stringify(_this.ruleForm.content);
            _this.api.updatePlatformPriceModelConfig(_this.ruleForm).then(function (res) {
              if (res.code == 1) {
                _this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'success',
                });
              } else {
                _this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'warning'
                });
              }
            }).catch(function (error) {
              throw new Error(error);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      /**
       * 创建时间
       * @param during
       * @return Array
       * */
      createTimed: function ({during: during}) {  // 生成定时时间
        let currentDataTime = 86400;
        let spacingInterval = during * 60;
        let maxSize = Math.ceil(currentDataTime / spacingInterval);
        let current = 0, next = 0, currentTemp = {}, nextTemp = {}, currentTimed, timedGroup = [];
        for (let i = 0; i < maxSize; i++) {
          current = i * spacingInterval;
          next = (i + 1) * spacingInterval;

          // currentTemp
          currentTemp.hour = Math.floor(current / 3600);
          if (current % 3600 == 0) {
            currentTemp.minute = 0;
          } else {
            currentTemp.minute = current % 3600 / 60;
          }
          if (currentTemp.hour >= 24) {
            currentTemp.hour = 0;
          }

          // nextTemp
          nextTemp.hour = Math.floor(next / 3600);
          if (next % 3600 == 0) {
            nextTemp.minute = 0;
          } else {
            nextTemp.minute = next % 3600 / 60;
          }
          if (nextTemp.hour >= 24) {
            nextTemp.hour = 0;
            nextTemp.minute = 0;
          }

          currentTimed = (currentTemp.hour < 10 ? '0' + currentTemp.hour : currentTemp.hour) + ':' + (currentTemp.minute < 10 ? '0' + currentTemp.minute : currentTemp.minute)
            + '|' +
            (nextTemp.hour < 10 ? '0' + nextTemp.hour : nextTemp.hour) + ':' + (nextTemp.minute < 10 ? '0' + nextTemp.minute : nextTemp.minute);
          timedGroup.push({
            timed: currentTimed,
            price: 0,
            enable: true
          })
        }
        return timedGroup;
      },
      /**
       * 创建跑腿时间
       */
      runnerCreateTime: function () {
        let during = this.ruleForm.deliver.during;
        if (!during) {
          this.$message({
            showClose: true,
            message: '分钟数不得为空',
            type: 'warning'
          });
          return false;
        }
        this.ruleForm.deliver.during_time = this.createTimed({during: during});
      },
      /**
       * 创建排队时间
       */
      lineCreateTime: function () {
        let during = this.ruleForm.line.during;
        if (!during) {
          this.$message({
            showClose: true,
            message: '分钟数不得为空',
            type: 'warning'
          });
          return false;
        }
        this.ruleForm.line.during_time = this.createTimed({during: during});
      },
      /**
       * 创建家政时间
       */
      homemakingCreateTime: function () {
        let during = this.ruleForm.homework.during;
        if (!during) {
          this.$message({
            showClose: true,
            message: '分钟数不得为空',
            type: 'warning'
          });
          return false;
        }
        this.ruleForm.homework.during_time = this.createTimed({during: during});
      },
      changeEnable({currentIten: timedItem}) {
        timedItem.enable = timedItem.enable == 1 ? 0 : 1;
      },
    },
    data() {
      return {
        loading: true,  // 页面加载
        currentOption: '1',
        ruleForm: {
        //   "id": 11,                //类型：Number  必有字段  备注：无
        //   "deliver": {                //类型：Object  必有字段  备注：跑腿
        //     "type": '1',                //类型：Number  必有字段  备注：1是骑行2是驾车3是步行4是直线
        //     "dis": {                //类型：Object  必有字段  备注：距离计费
        //       "base_dis": 3,                //类型：Number  必有字段  备注：无
        //       "base_price": 10,                //类型：Number  必有字段  备注：无
        //       "add_dis": 1,                //类型：Number  必有字段  备注：无
        //       "add_price": 3                //类型：Number  必有字段  备注：无
        //     },
        //     "weight": {                //类型：Object  必有字段  备注：重量计费
        //       "base_weight": 1,                //类型：Number  必有字段  备注：无
        //       "base_price": 0,                //类型：Number  必有字段  备注：无
        //       "add_weight": 1,                //类型：Number  必有字段  备注：无
        //       "add_price": 6                //类型：Number  必有字段  备注：无
        //     },
        //     "during": 600,                //类型：Number  必有字段  备注：时间段
        //     "during_time": [                //类型：Array  必有字段  备注：生成时间段
        //       {                //类型：Object  必有字段  备注：无
        //         "timed": "00:00|10:00",                //类型：String  必有字段  备注：无
        //         "price": 0,                //类型：Number  必有字段  备注：无
        //         "enable": 1                //类型：Number  必有字段  备注：无
        //       },
        //       {                //类型：Object  必有字段  备注：无
        //         "timed": "10:00|20:00",                //类型：String  必有字段  备注：无
        //         "price": 0,                //类型：Number  必有字段  备注：无
        //         "enable": 1                //类型：Number  必有字段  备注：无
        //       },
        //       {                //类型：Object  必有字段  备注：无
        //         "timed": "20:00|00:00",                //类型：String  必有字段  备注：无
        //         "price": 0,                //类型：Number  必有字段  备注：无
        //         "enable": 1                //类型：Number  必有字段  备注：无
        //       }
        //     ]
        //   },
        //   "drive": {                //类型：Object  必有字段  备注：代驾
        //     "type": '2',                //类型：Number  必有字段  备注：1是骑行2是驾车3是步行4是直线
        //     "base_dis": 3,                //类型：Number  必有字段  备注：起步距离
        //     "base_price": 10,                //类型：Number  必有字段  备注：起步价格
        //     "add_dis": 1,                //类型：Number  必有字段  备注：增加距离
        //     "add_price": 1.5                //类型：Number  必有字段  备注：增加价格
        //   },
        //   "line": {                //类型：Object  必有字段  备注：排队
        //     "base_time": 2,                //类型：Number  必有字段  备注：初始时间
        //     "base_price": 2,                //类型：Number  必有字段  备注：初始间隔
        //     "add_time": 1,                //类型：Number  必有字段  备注：增加时间
        //     "add_price": 1.5,                //类型：Number  必有字段  备注：增加价格
        //     "during": 600,                //类型：Number  必有字段  备注：无
        //     "during_time": [                //类型：Array  必有字段  备注：无
        //       {                //类型：Object  必有字段  备注：无
        //         "timed": "00:00|10:00",                //类型：String  必有字段  备注：无
        //         "price": 0,                //类型：Number  必有字段  备注：无
        //         "enable": 1                //类型：Number  必有字段  备注：无
        //       },
        //       {                //类型：Object  必有字段  备注：无
        //         "timed": "10:00|20:00",                //类型：String  必有字段  备注：无
        //         "price": 0,                //类型：Number  必有字段  备注：无
        //         "enable": 1                //类型：Number  必有字段  备注：无
        //       },
        //       {                //类型：Object  必有字段  备注：无
        //         "timed": "20:00|00:00",                //类型：String  必有字段  备注：无
        //         "price": 0,                //类型：Number  必有字段  备注：无
        //         "enable": 1                //类型：Number  必有字段  备注：无
        //       }
        //     ]
        //   },
        //   "homework": {                //类型：Object  必有字段  备注：家政
        //     "week": {                //类型：Object  必有字段  备注：无
        //       "sun": 10,                //类型：Number  必有字段  备注：无
        //       "mon": 10,                //类型：Number  必有字段  备注：无
        //       "tue": 10,                //类型：Number  必有字段  备注：无
        //       "wed": 10,                //类型：Number  必有字段  备注：无
        //       "thu": 10,                //类型：Number  必有字段  备注：无
        //       "fri": 20,                //类型：Number  必有字段  备注：无
        //       "sat": 20                //类型：Number  必有字段  备注：无
        //     },
        //     "during": 600,                //类型：Number  必有字段  备注：无
        //     "during_time": [                //类型：Array  必有字段  备注：无
        //       {                //类型：Object  必有字段  备注：无
        //         "timed": "00:00|10:00",                //类型：String  必有字段  备注：无
        //         "price": 60,                //类型：Number  必有字段  备注：无
        //         "enable": 1                //类型：Number  必有字段  备注：无
        //       },
        //       {                //类型：Object  必有字段  备注：无
        //         "timed": "10:00|20:00",                //类型：String  必有字段  备注：无
        //         "price": 60,                //类型：Number  必有字段  备注：无
        //         "enable": 1                //类型：Number  必有字段  备注：无
        //       },
        //       {                //类型：Object  必有字段  备注：无
        //         "timed": "20:00|00:00",                //类型：String  必有字段  备注：无
        //         "price": 60,                //类型：Number  必有字段  备注：无
        //         "enable": 1                //类型：Number  必有字段  备注：无
        //       }
        //     ]
        //   }
        },
        rules: {},
      }
    },
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .el-form {
    width: 1000px;
    margin: 15px 0 15px 30px;
  }

  .row-col {
    margin-bottom: 15px;
  }
</style>
